<!--
 * @Author: your name
 * @Date: 2019-10-30 18:25:15
 * @LastEditTime: 2019-11-13 11:46:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /-/src/components/modal/modal.vue
 -->
<template>
    <view class="modal-layer"  v-if="visible">
        <div  class="modal-layer" v-if="visible" @click.self="handleLayerClick"></div>
        <view class="container">
            <view class="box" @click.stop="pickerUp">
                <view class="title">快捷电话</view>
                <view class="content">
                    <view class="server-type">
                        <view class="item" @click.stop="pickerDown">
                            <view class="label">服务类型：</view>
                            <view class="picker">{{array[index]}}</view>
                        </view>
                        <view class="picker-view" v-if="isShow">
                            <picker-view  @change="bindChange" :value="value" indicator-class="picker-class">
                                <picker-view-column>
                                    <view class="picker-item" v-for="(item,index) in array" :key="index">{{item}}</view>
                                </picker-view-column>
                            </picker-view>
                        </view>
                    </view>
                    <view class="phone item">
                        <view class="label">手机号：</view>
                        <view class="picker">
                             <input type="number" placeholder="请输入手机号码" maxlength="11" @input="getPhoneNum">
                        </view>
                    </view>
                    <view class="submit-btn" @click="submitBtn">提交</view>
                </view>
                <view class="footer">
                    <image
                        src="../../static/images/modal-footer.png"
                        mode="scaleToFill"
                        lazy-load="false">
                    </image>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
let app = getApp();
import Vue from "vue";
import Evaluate from "@/components/evaluate/evaluate.vue";
import Swiper from "@/components/swiper/swiper.vue";
import InterServer from "@/common/config/server";
import API from "@/common/config/config";
import {checkPhoneNumber} from '@/common/js/common'
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        }
        },
  data() {
    return {
      array: ['房产抵押抵款', '车产抵押贷款', '信用贷款', '信用卡'],
      index:1,
      value:[1],
      isShow:false,
      mobile:"",
    };
  },
  created() {
    console.log(this.coinType)
  },
  methods: {
    //picker选择
    bindChange: function (e) {
        const val = e.detail.value
        this.index=val[0];
        this.value=val;
    },
     //点击展开picker
     pickerDown(){
         this.isShow=true;
         this.index=this.index;
     },
     //点击收起
     pickerUp(){
        this.isShow=false;
     },
      //提交快捷电话
    loanIntent(){
      let loanType=String(this.array[this.index])
      InterServer.loanIntent({
        mobile:this.mobile,
        loanType:this.array[this.index]
      }).then(res=>{
        if(res.code==200){
             Vue.showCustomToast("提交成功")
             this.$emit('submitcallback'); //关闭回调事件
        }
      })
    },
    //获取手机号
    getPhoneNum(e){
      this.mobile=e.detail.value
    }, 
    //点击提交
    submitBtn(){
       if(checkPhoneNumber(this.mobile))
        this.loanIntent()
    },
     handleLayerClick(){
        this.$emit('handlelayerclick'); //关闭回调事件
     }   
  }
};
</script>
<style lang="less" scoped>
.modal-layer{
    width: 100%;
    height: 100%;
    background:rgba(1,1,1,0.65);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index:199;
    .container{
        position: absolute;
        width:682upx;
        height:634upx;
        border-radius:20upx;
        left: 50%;
        top: 50%;
        margin-left: -341upx;
        margin-top: -350upx;
        background-image: url("../../static/images/modal-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 20upx;
        z-index: 9999;
        .box{
            width: 100%;
            height: 100%; 
            position: absolute;
            top: 0;
            left: 0;
             border-radius: 20upx;
            .title{
                height:50upx;
                font-size:36upx;
                font-family:PingFang-Semibold;
                font-weight:bold;
                line-height:50upx;
                color:rgba(50,50,50,1);
                text-align: center;
                margin: 36upx 0 78upx;
            }
            .content{
                .server-type{
                    position: relative;
                }
                .item{
                    display: flex;
                    margin-bottom:48upx;
                    justify-content: center;
                    .label{
                        width: 150upx;
                        height:42upx;
                        font-size:30upx;
                        font-family:PingFang-Semibold;
                        font-weight:bold;
                        line-height:42upx;
                        color:rgba(51,51,51,1);
                        text-align: right;
                    }
                    .picker{
                        width:372upx;
                        height:44upx;
                        line-height:44upx;
                        background:rgba(255,255,255,1);
                        box-shadow:0px 3upx 6upx rgba(0,136,255,0.27);
                        border-radius:22upx;
                        display: flex;
                        justify-content: center;
                        justify-items: center;
                        font-size:28upx;
                        font-family:PingFang-Semibold;
                        font-weight:bold;
                    }
                   .picker input {
                        width:250upx;
                        height:40upx!important;
                        line-height:40upx!important;
                        color:rgba(102,102,102,1);
                    }
                }
                .submit-btn{
                    width:518upx;
                    height:58upx;
                    line-height: 58upx;
                    background:rgba(0,136,255,1);
                    border-radius:29upx;
                    font-size:36upx;
                    font-family:PingFang-Semibold;
                    font-weight:bold;
                    color:rgba(255,255,255,1);
                    text-align: center;
                    margin: 0 auto;
                }
                .picker-view{
                    width:374upx;
                    height:210upx;
                    background:rgba(255,255,255,1);
                    border-top-left-radius: 20upx;
                    border-top-right-radius: 20upx;
                    position: absolute;
                    top: 44upx;
                    left: 50%;
                    margin-top: -10upx;
                    margin-left: -114upx;
                    z-index: 99999;
                    uni-picker-view{
                        width: 100%;
                        height: 100%;
                    }
                    uni-picker-view-column{
                        border-top-left-radius: 20upx;
                        border-top-right-radius: 20upx;
                    }
                    .uni-picker-view{
                        width: 100%;
                        height: 100%;
                        z-index: 999999;
                    }
                    picker-view {
                        height: 100%;
                    }
                    .picker-item{
                        text-align: center;
                        margin: auto;
                        height:34px;
                        line-height: 34px;
                        font-family:PingFang-Semibold;
                        font-weight:bold;
                        color:rgba(102,102,102,1);
                    }
                }
            }
            .footer{
                 width:241upx;
                 height:74upx;
                 margin: 91upx auto 0;
                image{
                    width:241upx;
                    height:74upx;
                }
            }
        }
    }
}
</style>